<template>
  <div class="index-page">
    <header>
      <SearchHome :width="width">
        <template>
          <i class="iconfont icon-dingwei"></i>
        </template>
      </SearchHome>
    </header>
    <!-- <header>
      <div class="search">
      <div class="location">
        <span class="home">上海</span>
        <i class="iconfont icon-zelvxuanzefeiyongdaosanjiaoxingfandui"></i>
      </div>
      <div class="form">
        <i class="iconfont icon-sousuo"></i>
        <span class="text">请输入小区或地址</span>
      </div>
      </div>
      <i class="iconfont icon-dingwei"></i>
    </header> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperImg" :key="item.id">
        <img v-lazy="'http://www.xiaoshuaipeng.com:8080' + item.imgSrc" />
      </van-swipe-item>
    </van-swipe>
    <div class="shortcut">
      <router-link to="/house">
        <img src='@/assets/imgs/01.png' alt="" />
        <p>合租</p>
      </router-link>
      <router-link to="/house">
      <img src="@/assets/imgs/02.png" alt="">
        <p>整租</p>
      </router-link>
      <router-link to="/house">
      <img src="@/assets/imgs/03.png" alt="">
        <p>地图找房</p>
      </router-link>
      <router-link to="/house">
      <img src="@/assets/imgs/04.png" alt="">
        <p>去出租</p>
      </router-link>
    </div>
    <div class="group">
      <div class="top">
        <h2>租房小组</h2>
        <span>更多</span>
      </div>
      <div class="info">
        <router-link to="/house" v-for="item in group" :key="item.id">
          <div class="left">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
          <div class="right">
            <img
              :src="'http://www.xiaoshuaipeng.com:8080' + item.imgSrc"
              alt="图片"
            />
          </div>
        </router-link>
      </div>
      <div class="space"></div>
    </div>
    <NewConsultVue></NewConsultVue>
  </div>
</template>

<script>
import { swiper, groups } from '@/api/houses'
import NewConsultVue from '@/components/NewConsult.vue'
import SearchHome from '@/components/SearchHome.vue'
export default {
  name: 'IndexPage',
  components: {
    NewConsultVue,
    SearchHome
  },
  data () {
    return {
      value: '',
      swiperImg: [],
      group: [],
      width: 'width:310px'
    }
  },
  created () {
    this.goIndex()
    this.goGroup()
  },
  beforeRouteEnter (to, from, next) {
    // console.log('from', from)
    // console.log(from.params.cityNa)
    localStorage.setItem('cityName', from.params.cityNa)
    next()
  },
  methods: {
    async goIndex () {
      const data = await swiper()
      // console.log(data.body)
      this.swiperImg = data.body
    },
    async goGroup () {
      const data = await groups({
        params: { area: 'AREA|dbf46d32-7e76-1196' }
      })
      // console.log(data.body)
      this.group = data.body
    }
  }
}
</script>
<style >
body {
  background-color: #f6f5f6;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei";
}
</style>
<style lang="less" scoped>
header {
  position: absolute;
  top: 25px;
  z-index: 999;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  .icon-dingwei {
    margin-top: 4px;
    font-size: 26px;
    color: #fff;
    text-align: center;
    line-height: 25px;
  }
}
.my-swipe {
  height: 212px;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img {
      width: 100%;
      height: 212px;
    }
  }
}
.shortcut {
  display: flex;
  height: 93px;
  padding: 8px 15px;
  background-color: #fff;
  a {
    flex: 1;
    height: 122px;
    text-align: center;
    color: #333;
    img {
      width: 48px;
    }
    p {
      height: 50px;
      font-size: 13px;
      &.nth-last-child {
        color: #999;
        font-size: 12px;
      }
    }
  }
}
.group {
  margin: 15px 10px;
  .top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    h2 {
      flex: 1;
      font-size: 15px;
    }
    span {
      flex: 1;
      display: block;
      text-align: right;
      font-size: 12px;
      color: #787d82;
    }
  }
  .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 48%;
      height: 60px;
      margin-right: 7px;
      margin-bottom: 7px;
      padding-top: 8px;
      background-color: #fff;
      color: #333;
      font-weight: 700;
      .left {
        flex: 1;
        text-align: center;
        p {
          line-height: 18px;
          font-size: 13px;
          &:last-child {
            color: #999;
            font-size: 12px;
          }
        }
      }
      .right {
        flex: 1;
        height: 50px;
        padding: 2px 0;
        text-align: center;
        img {
          width: 45px;
        }
      }
    }
  }
}
</style>
